<template>
  <div v-loading="loading" v-empty="list" xs-empty-icon="none" xs-empty-text="暂无记录">
    <flexbox class="flow-head">
      <div class="flow-head-name">审批流程</div>
      <i class="el-icon-close flow-head-close" @click="close" />
    </flexbox>
    <div class="flow-body">
      <flexbox v-for="(item, index) in list" :key="index" class="flow-item" align="stretch" justify="flex-start">
        <i :class="getStatusIcon(item.examineStatus)" :style="{
          color: getStatusColor(item.examineStatus)
        }" class="flow-item-img" />
        <div>
          <flexbox class="flow-item-head">
            <!-- <div class="flow-item-des">{{ item.orderId|stepName }}</div> -->
            <div>{{ item.examineTime }}</div>
          </flexbox>
          <flexbox class="flow-item-info">
            <div class="flow-item-name">{{ item.examineUserName }}</div>
            <!-- 审核中 3 当做 待审核 0 处理 -->
            <div><span>{{ getStatusName(item.examineStatus) }}</span>此申请</div>
          </flexbox>
          <div v-if="item.remarks" class="flow-item-content">{{ item.remarks }}
            <div class="flow-item-content-arrow" />
          </div>
        </div>
        <div class="flow-item-line" />
      </flexbox>
    </div>
  </div>
</template>

<script>
import CheckStatusMixin from '@/mixins/CheckStatusMixin'


export default {
  // 查看审批历史
  name: 'CheckFlow',
  components: {},
  filters: {
    stepName: function (index) {
      return '第' + 2 + '级'
    }
  },
  mixins: [CheckStatusMixin],
  props: {
    examineType: {
      type: String,
      default: ''
    },
    // 详情信息id
    id: [String, Number],
    show: Boolean
  },
  data () {
    return {
      loading: false,
      list: []
    }
  },
  computed: {},
  watch: {
    show: function (val) {
      if (val) {
        this.list = []
        this.getDetail()
      }
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      var res = [
        {
          "logId": -190902272,
          "examineId": "1685860863743356975",
          "flowId": "1685860863743356978",
          "recordId": -211873792,
          "type": null,
          "remarks": null,
          "sort": 0,
          "examineStatus": 6,
          "examineUserId": "0",
          "examineUserName": "admin",
          "examineRoleId": 0,
          "createUserId": "1685860863323926528",
          "createTime": "2023-08-03 15:34:04",
          "examineTime": "2023-08-03 15:34:04",
          "examineReason": null
        },
        {
          "logId": 81727488,
          "examineId": "1685860863743356975",
          "flowId": "1685860863743356978",
          "recordId": -211873792,
          "type": 1,
          "remarks": "",
          "sort": 0,
          "examineStatus": 1,
          "examineUserId": "1685860863323926528",
          "examineUserName": "admin",
          "examineRoleId": 0,
          "createUserId": "1685860863323926528",
          "createTime": "2023-08-03 15:34:04",
          "examineTime": "2023-08-04 15:57:20",
          "examineReason": null
        }
      ];
      this.list = JSON.parse(JSON.stringify(res));
    },

    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
/** 头部的css */
.flow-head {
  padding: 8px 0;

  .flow-head-name {
    flex: 1;
    font-size: $--font-size-large;
  }

  .flow-head-close {
    font-size: 24px;
    cursor: pointer;
  }

  .flow-head-close:hover {
    color: $--color-primary;
  }
}

.flow-body {
  max-height: 300px;
  overflow: auto;
}

/** 每行的css */
.flow-item {
  position: relative;
  padding-bottom: #{$--interval-base * 2};

  .flow-item-img {
    height: 18px;
    margin-right: $--interval-base;
    font-size: 18px;
    background-color: white;
  }

  .flow-item-head {
    color: $--color-text-secondary;

    .flow-item-des {
      margin-right: 10px;
    }
  }

  .flow-item-info {
    margin-top: $--interval-base;

    .flow-item-name {
      margin-right: $--interval-base;
    }
  }

  .flow-item-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    z-index: -1;
    width: 1px;
    background-color: $--border-color-base;
  }

  .flow-item-content {
    position: relative;
    padding: 8px;
    margin-top: 15px;
    font-size: 12px;
    line-height: 18px;
    color: $--color-text-secondary;
    background-color: $--color-n20;
    border-radius: $--border-radius-base;

    .flow-item-content-arrow {
      position: absolute;
      top: -4px;
      left: 25px;
      width: 8px;
      height: 8px;
      background-color: $--color-n20;
      transform: rotate(45deg);
    }
  }
}
</style>
